import { VxeGridPropTypes, } from "vxe-table/types/grid";
import XEUtils from 'xe-utils';
import { BillItem } from "/@/api/wms/wms-model";

export const df = 'YYYY-MM-DD HH:mm:ss'
// export const df = 'YYYY-MM-DD'

export const columns: VxeGridPropTypes.Columns = [
  {type: 'checkbox', width: 60, fixed: 'left',},
  {type: 'seq', title: '序号', treeNode: false, width: 50,},
  {field: 'code', title: '入库单号', sortable: false, visible: true, minWidth: 160,},
  {field: 'ioTypeDict.label', title: '入库类型', sortable: false, minWidth: 80,cellRender: {name: 'BillType'},},
  {field: 'supplier.name', title: '供货商', sortable: false, visible: true, minWidth: 120,},
  {field: 'orderCode', title: '订单号', sortable: false, visible: true, minWidth: 130,},
  // {field: 'goodsList.name', title: '商品', sortable: false, visible: true, width: 120,
  // formatter: ({row,}) => {
  //   if (row.goodsList) {
  //     return row.goodsList.map(e => e.goods.name).toString()
  //   }
  //   return '';
  // }},
  // {field: 'count', title: '货物计数', sortable: false, visible: true, width: 80,
  // formatter: ({row,}) => {
  //   return row?.goodsList?.length
  // }},
  {field: 'qty', title: '总数量', sortable: false, visible: true, width: 100,
  formatter: ({row,}) => {
    if (row.goodsList) {
      const qty = row.goodsList.reduce((pre, cur,) => pre + cur.qty, 0)
      return XEUtils.commafy(qty, { digits: 1, });
    }
    return 0;
  }},
  {field: 'amount', title: '总金额', sortable: true, visible: true, width: 120,
  formatter: ({row,}) => {
    if (row.goodsList) {
      const amount = row.goodsList.reduce((pre, cur,) => pre + (cur.qty * cur.price), 0)
      return XEUtils.commafy(XEUtils.toNumber(amount), { digits: 2, });
    }
    return 0;
  }},
  {field: 'creator.name', title: '创建人', sortable: false, visible: true, width: 90,},
  {field: 'editor.name', title: '修改人', sortable: false, visible: false, width: 90,},
  {field: 'memo', title: '备注', visible: true, sortable: false, minWidth: 90,},
  // {field: 'workAt', title: '业务日期', sortable: true, visible: false, width: 160,},
  {field: 'CreatedAt', title: '入库时间', visible: true, sortable: true, width: 160,
  formatter ({ cellValue }) {
    return XEUtils.toDateString(cellValue,)
  }},
  {field: 'UpdatedAt', title: '更新时间', visible: false, sortable: false, width: 160,
  formatter ({ cellValue }) {
    return XEUtils.toDateString(cellValue,)
  }},
];

export const columnsOfIned: VxeGridPropTypes.Columns = [
  {type: 'checkbox', width: 50, fixed: 'left',},
  {type: 'seq', title: '序号', treeNode: false, width: 50, fixed: 'left',},
  {field: 'code', title: '单据编号', sortable: true, visible: true, width: 150, fixed: 'left',},
  {field: 'relaCode', title: '关联业务单据编号', sortable: true, visible: true, width: 150,},
  {field: 'name', title: '单据名称', sortable: false, visible: true, width: 100,},
  {field: 'status', title: '状态', sortable: false, width: 80, cellRender: {name: 'SheetStatus'},},
  {field: 'invtList.name', title: '商品', sortable: false, visible: true, width: 120,
  formatter: ({row,}) => {
    if (row.invtList) {
      return row.invtList.map(e => e.goods.name).toString()
    }
    return '';
  }},
  {field: 'qty', title: '已入库量', sortable: true, visible: true, width: 110,
  formatter: ({row,}) => {
    if (row.invtList) {
      const qty = row.invtList.reduce((pre, cur,) => pre + cur.qty, 0)
      return XEUtils.commafy(XEUtils.toNumber(qty), { digits: 1, });
    }
    return 0;
  }},
  {field: 'totalAmount', title: '金额', sortable: true, visible: false, width: 120,
  formatter: ({row,}) => {
    if (row.invtList) {
      const totalAmount = row.invtList.reduce((pre, cur,) => pre + (cur.qty * cur.price), 0)
      return XEUtils.commafy(XEUtils.toNumber(totalAmount), { digits: 2, });
    } 
    return 0;
  }},
  {field: 'handler.name', title: '经手人', sortable: false, visible: false, width: 80,},
  {field: 'memo', title: '备注', visible: true, sortable: false, width: 180,},
  {field: 'workDate', title: '业务日期', sortable: true, visible: true, width: 140,},
  {field: 'verifyDate', title: '审核日期', visible: false, sortable: false, width: 140,},
  {field: 'closeDate', title: '关闭日期', visible: false, sortable: false, width: 140,},
  {field: 'createdTime', title: '创建时间', visible: false, sortable: false, width: 140,},
  {field: 'updatedTime', title: '更新时间', visible: false, sortable: false, width: 140,},
];

export const supplierColumns: VxeGridPropTypes.Columns = [
  {field: 'code', title: '供应商编码', sortable: false, visible: true, width: 140,},
  {field: 'name', title: '供应商', sortable: false, visible: true, minWidth: 160,},
  {field: 'contacts', title: '联系人', sortable: false, visible: true, width: 100,},
  {field: 'phone', title: '联系电话', sortable: false, visible: true, width: 150,},
  {field: 'enable', title: '启用', sortable: false, width: 50, formatter: 'formatEnable',},
]

export const goodsListColumns: VxeGridPropTypes.Columns = [
  // {title: '操作', sortable: false, visible: true, slots: {default: 'operate', header: ({column,}) => {
  //   console.log(column)
  //   return (<vxe-button icon="vxe-icon-close" round></vxe-button>)
  // },}, 
  //       width: 45, align: 'center', fixed: 'left',},
  { field: 'seq', type: 'seq', title: '序号', align: 'center', width: 50,},
  { field: 'name', title: '货物', minWidth: 140, sortable: false,},
  { field: 'code', title: '货物编号', minWidth: 120, sortable: false,},
  { field: 'cate.name', title: '货物类别', minWidth: 90, sortable: false,},
  { field: 'unit', title: '单位', width: 55, visible: true, sortable: false,},
  { field: 'barcode', title: '条码', minWidth: 120, visible: false, sortable: false,},
  { field: 'wid', title: '收货仓库/库区', minWidth: 200, visible: true, sortable: false, align: 'left', 
    editRender: {autofocus: '.vxe-input--inner', autoselect: true, immediate: false,}, 
    // slots: { edit: 'whId_edit', 
    // header: ({}) => {
    //   return (
    //     <span>
    //       <b>仓库</b>
    //       <a style="margin-left:12px;font-weight:normal;">批量</a>
    //     </span>
    //   )
    // }
    // },
  },
  { field: 'qty', title: '入库数量', minWidth: 150, visible: true, sortable: false, align: 'left',
    editRender: {autofocus: '.vxe-input--inner', autoselect: true, immediate: true,}, 
    slots: { edit: 'qty_edit', default: 'qty_edit_default', },
  },
  { field: 'price', title: '单价', minWidth: 150, visible: true, sortable: false, align: 'left',
    editRender: {autofocus: '.vxe-input--inner', autoselect: true, immediate: true,}, 
    slots: { edit: 'price_edit', default: 'price_edit_default' },
  },
  { field: 'amount', title: '金额', minWidth: 120, visible: true, sortable: true, align: 'left', formatter: 'amount',},
  // { field: 'isGift', title: '赠品', width: 60, align: 'left', visible: true, slots: { default: 'isGift_edit',},},
  { field: 'memo', title: '备注', minWidth: 120, visible: true, sortable: false,
  editRender: {autofocus: '.vxe-input--inner', autoselect: true,}, 
  slots: { edit: 'memo_edit' },},
]

// print
export const printColumns: VxeGridPropTypes.Columns = [
  { field: 'goods.name', title: '货物', minWidth: 150, sortable: false,},
  { field: 'goods.code', title: '货物编号', minWidth: 120, sortable: false,},
  { field: 'goods.cate.name', title: '类别', minWidth: 120, sortable: false,},
  { field: 'goods.unit', title: '单位', width: 55, visible: true, sortable: false,},
  // { field: 'barcode', title: '条码', minWidth: 150, visible: false, sortable: false,},
  { field: 'warehouse.name', title: '收货仓库/库区', minWidth: 150, visible: true, sortable: false, align: 'left',},
  { field: 'qty', title: '入库数量', width: 80, visible: true, sortable: false, align: 'left',},
  // { field: 'price', title: '单价', minWidth: 100, visible: true, sortable: false, align: 'left',},
  // { field: 'amount', title: '金额', minWidth: 120, visible: true, sortable: true, align: 'left', formatter: 'amount',},
  // { field: 'isGift', title: '赠品', width: 60, align: 'left', visible: true, slots: { default: 'isGift_edit',},},
  // { field: 'memo', title: '备注', minWidth: 120, visible: true, sortable: false,}
]
export const printStyle = `
.title {
  text-align: center;
}
.qrcode{
  position: absolute;top:6px;right:10px;
}
.my-list-row {
  display: inline-block;
  width: 100%;
}
.my-list-col {
  float: left;
  width: 33.33%;
  height: 28px;
  line-height: 28px;
}
.my-top,
.my-bottom {
  font-size: .9rem;
}
.my-top {
  margin-bottom: 5px;
}
.my-bottom {
  margin-top: 5px;
  text-align: right;
}
.my-bottom .my-list-col { display:flex;justify-content: space-between;width:50%; }
`

export function wrap(row:BillItem, u:string) {
  const topHtml = `
  <h2 class="title">收货单</h2>
  <img class="qrcode" src="${u}">
  <div class="my-top">
    <div class="my-list-row">
      <div class="my-list-col">收货单号：${row.code}</div>
      <div class="my-list-col">收货日期：${XEUtils.toDateString(row.CreatedAt)}</div>
    </div>
    <div class="my-list-row">
      <div class="my-list-col">供应商：${row.supplier.name}</div>
      <div class="my-list-col">订单号：${row.orderCode}</div>
    </div>
  </div>
  `
  const bottomHtml = `
<div class="my-bottom">
  <div class="my-list-row">
    <div class="my-list-col">备注：${row.memo}</div>
    <div class="my-list-col">收货人：${row.creator.name}</div>
  </div>
</div>
`
  return {
    topHtml,
    bottomHtml,
  }
}

export function print($table:any, row:BillItem, columns:VxeGridPropTypes.Columns, data:any) {
  if ($table) {
    $table.print({
      sheetName: '打印',
      isHeader: true,
      isFooter: true,
      style: printStyle,
      modes: 'all',
      columns: columns,
      // data: insideData.data.goodsList,
      data: data,
      beforePrintMethod: ({ content }) => {
        // $table.updateFooter()
        // const row = insideData.data as any
        return wrap(row).topHtml + content + wrap(row).bottomHtml
      }
    })
  }
}

